<%--
  Created by IntelliJ IDEA.
  User: TT
  Date: 2020/5/14
  Time: 20:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- 模态框 -->
<div data-modal="add" class="modal fade bd-example-modal-xl" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">

        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title pl-1" id="staticBackdropLabel">请选择供应商物品</h6>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 查询组 -->
                <form name="thl-form">
                    <div class="form-row">
                        <div class="form-group col-md-4">
                            <input name="id" class="form-control" placeholder="请输入商品编码">
                        </div>
                        <div class="form-group col-md-4">
                            <input name="goodsName" class="form-control" placeholder="请输入商品品名">
                        </div>
                        <div class="form-group col-md-2">
                            <button class="btn btn-outline-primary" name="thl-find" type="button">查询</button>
                        </div>
                    </div>
                </form>

                <%-- 表格 --%>
                <div name="thl-table">

                </div>
                <%-- 分页条 --%>
                <div class="clearfix">
                    <ul class="pagination float-right" name="ulPage2"  >
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn grey btn-outline-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-outline-primary" data-dismiss="modal" name="thl-submit">确认</button>
            </div>
        </div>

    </div>
</div>
<script>
    //默认执行ajax请求
    (function () {
        let trData = []; //保存每个tr节点的主键
        let trArray = []; //保存tr节点的对象的数组
        //定义一个默认发送的ajax方法
        let find = function(){
            $('.modal[data-modal="add"]').on('hidden.bs.modal',function () {
                $(this).remove();
            });
            //请求的地址
            let url = 'addGoodsServlet';
            //表单要提交的值
            let value = $('[name="thl-form"]').serialize();
            //发送ajax请求
            $.post(url, value,function (result) {
                //将页面数据取出
                let goodsPageVO = result.data;
                //定义分页的数据
                let currentIndex = goodsPageVO.pageIndex;
                let pageSize = goodsPageVO.pageSize; //展示多少数据
                let total = goodsPageVO.total; //一共有多少条数据
                let totalPage = Math.ceil(total / pageSize); //总页数
                //判断是否是第一页或者是最后一页
                let preDisabled = currentIndex <= 1 ? 'disabled' : '';
                let nextDisabled = currentIndex >= totalPage ? 'disabled' : '';

                //定义要显示的列名
                let columns = [{field:"id",title:"商品编码"},
                    {field:"goodsName",title:"商品名称"},
                    {field:"categoryName", title:"商品分类"},
                    {field:"unit", title:"计量单位"}];
                //定义表格的数据
                let options = {
                    isPaging: false,
                    node: "[name='thl-table']",
                    pageVO: goodsPageVO,
                    columns: columns,
                    key: 'id',
                    click: function (node, columns, uu) {

                        //uu是选中的tr节点
                        if(node == 'true'){

                            //循环遍历uu map对象
                            for(let i in uu){
                                //找到tr节点
                                let trNode = uu[i];
                                //再找到tr中第二个td的值
                                let value = $(trNode).find('td:nth-child(2)').text();
                                if(trData.indexOf(value) == -1){
                                    trData.push(value)
                                }
                                //将tr节点转化为对象
                                let trObj =  getObj(uu[i],columns,false,true,false);
                                //遍历trArray数组中的对象
                                if(JSON.stringify(trArray).indexOf(JSON.stringify(trObj)) == -1){
                                  //数组中没有该对象，执行添加
                                    trArray.push(trObj);
                                }

                            }

                        }else if(node == 'false'){

                            //循环遍历uu map对象
                            for(let i in uu){
                                //找到tr节点
                                let trNode = uu[i];
                                //再找到tr中第二个td的值
                                let value = $(trNode).find('td:nth-child(2)').text();
                                if(trData.indexOf(value) != -1){
                                    trData.splice(trData.indexOf(value),1)
                                }

                                //将tr节点转化为对象
                                let trObj =  getObj(uu[i],columns,false,true,false);
                                //遍历trArray数组中的对象,
                                for(let j = 0; j < trArray.length; j++){
                                    //如果数组中存在相同的对象，则执行删除
                                    if(trArray[j].id == trObj.id){
                                        trArray.splice(j,1);
                                    }
                                }


                            }

                        }else if(node.nodeName === "TR"){
                            //将tr节点转化为对象
                           let trObj =  getObj(node,columns,false,true,false);

                            //单独点击每一行tr
                            if($(node).find('input')[0].checked){
                                //表示是选中状态
                                let value = $(node).find('td:nth-child(2)').text();
                                if(trData.indexOf(value) == -1){
                                    trData.push(value);
                                }
                                //将当前tr节点转化为对象
                                let trObj =  getObj(node,columns,false,true,false);
                                //遍历trArray数组中的对象
                                if(JSON.stringify(trArray).indexOf(JSON.stringify(trObj)) == -1){
                                    //数组中没有该对象，执行添加
                                    trArray.push(trObj);
                                }
                            }else{
                                //表示取消选中
                                let value = $(node).find('td:nth-child(2)').text();
                                if(trData.indexOf(value) != -1){
                                    //从数组中删除指定的value值
                                    trData.splice(trData.indexOf(value),1)
                                }
                                //将tr节点转化为对象
                                let trObj =  getObj(node,columns,false,true,false);


                                //遍历数组
                                for(let i = 0; i < trArray.length; i++){
                                    //判断点击的对象是否已经保存在数组中
                                    if(trArray[i].id == trObj.id){
                                        //表示数组有对象，执行删除
                                        trArray.splice(i,1);
                                    }
                                }
                            }
                        }
                    }
                };
                firstTable(options);

                //定义分页
                //定义模板字符串，并将数据拼接到模板字符串中
                let pageNode =  `
                <li class="page-item \${preDisabled}"><a class="page-link" href="#" data-current-index="1">Previous</a></li>
                <li class="page-item \${preDisabled}"><a class="page-link" href="#" data-current-index="\${currentIndex - 1}">&laquo;</a></li>
                <li class="page-item disabled"><a class="page-link" href="#" name="currentIndex">\${currentIndex}</a></li>
                <li class="page-item \${nextDisabled}"><a class="page-link" href="#" data-current-index="\${currentIndex + 1}">&raquo;</a></li>
                <li class="page-item \${nextDisabled}"><a class="page-link" href="#" data-current-index="\${totalPage}">Next</a></li>
                <li class="page-item" style="min-width: 84px; height: 35px"><div class="page-link" style="padding-top: 7px; padding-bottom: 7px"><input name="jumpPage" value="\${currentIndex}" style="width: 50px;height: 20px;"> <span>/\${totalPage}</span></div></li>
                <li class="page-item"><button class="page-link" type="button">go</button></li>`;
                //将模板字符串放到定义好的ul中
                $('[name="ulPage2"]').html(pageNode)
            },'json')
        };


        //第一次默认调用该方法
        find();

        //给查询按钮绑定点击事件
        $('[name="thl-find"]').on('click', function () {
            //执行ajax请求的方法
            find();
        });

        //给分页的ul绑定点击事件
        $('[name="ulPage2"]').on('click',function (e) {
            e.preventDefault();
            //如果点击的是a标签
            if(e.target.nodeName === 'A'){
                //定义要请求的地址
                let url = 'addGoodsServlet';
                //获取请求的form表单值
                let formValue = $('[name="thl-form"]').serialize();
                //获取请求的分页参数值
                let currentIndex = e.target.dataset.currentIndex;

                //最终的value
                let value = formValue + '&' + 'currentIndex=' + currentIndex;

                $.post(url, value,function (result) {
                    //将返回的json数据中的pageVO取出来
                    let goodsPageVO = result.data;

                    //定义分页的数据
                    let currentIndex = goodsPageVO.pageIndex;
                    let pageSize = goodsPageVO.pageSize;
                    let total = goodsPageVO.total;
                    let totalPage = Math.ceil(total / pageSize);

                    //判断是否是第一页或者是最后一页
                    let preDisabled = currentIndex <= 1 ? 'disabled' : '';
                    let nextDisabled = currentIndex >= totalPage ? 'disabled' : '';

                    //定义模板字符串，并将数据拼接到模板字符串中
                    let pageNode =  `
                <li class="page-item \${preDisabled}"><a class="page-link" href="#" data-current-index="1">Previous</a></li>
                <li class="page-item \${preDisabled}"><a class="page-link" href="#" data-current-index="\${currentIndex - 1}">&laquo;</a></li>
                <li class="page-item disabled"><a class="page-link" href="#" name="currentIndex">\${currentIndex}</a></li>
                <li class="page-item \${nextDisabled}"><a class="page-link" href="#" data-current-index="\${currentIndex + 1}">&raquo;</a></li>
                <li class="page-item \${nextDisabled}"><a class="page-link" href="#" data-current-index="\${totalPage}">Next</a></li>
                <li class="page-item" style="min-width: 84px; height: 35px"><div class="page-link" style="padding-top: 7px; padding-bottom: 7px"><input name="jumpPage" value="\${currentIndex}" style="width: 50px;height: 20px;"> <span>/\${totalPage}</span></div></li>
                <li class="page-item"><button class="page-link" type="button">go</button></li>`;
                    //将模板字符串放到定义好的ul中
                    $('[name="ulPage2"]').html(pageNode)

                    //定义要显示的列名
                    let columns = [{field:"id",title:"商品编码"},
                        {field:"goodsName",title:"商品名称"},
                        {field:"categoryName", title:"商品分类"},
                        {field:"unit", title:"计量单位"}];
                    //定义表格的数据
                    let options = {
                        isPaging: false,
                        node: "[name='thl-table']",
                        pageVO: goodsPageVO,
                        columns: columns,
                        key: 'id',
                        click: function (node, columns, uu) {

                            //uu是选中的tr节点
                            if(node == 'true'){

                                //循环遍历uu map对象
                                for(let i in uu){
                                    //找到tr节点
                                    let trNode = uu[i];
                                    //再找到tr中第二个td的值
                                    let value = $(trNode).find('td:nth-child(2)').text();
                                    if(trData.indexOf(value) == -1){
                                        trData.push(value)
                                    }
                                    //将tr节点转化为对象
                                    let trObj =  getObj(uu[i],columns,false,true,false);
                                    //遍历trArray数组中的对象
                                    if(JSON.stringify(trArray).indexOf(JSON.stringify(trObj)) == -1){
                                        //数组中没有该对象，执行添加
                                        trArray.push(trObj);
                                    }

                                }

                            }else if(node == 'false'){

                                //循环遍历uu map对象
                                for(let i in uu){
                                    //找到tr节点
                                    let trNode = uu[i];
                                    //再找到tr中第二个td的值
                                    let value = $(trNode).find('td:nth-child(2)').text();
                                    if(trData.indexOf(value) != -1){
                                        trData.splice(trData.indexOf(value),1)
                                    }

                                    //将tr节点转化为对象
                                    let trObj =  getObj(uu[i],columns,false,true,false);
                                    //遍历trArray数组中的对象,
                                    for(let j = 0; j < trArray.length; j++){
                                        //如果数组中存在相同的对象，则执行删除
                                        if(trArray[j].id == trObj.id){
                                            trArray.splice(j,1);
                                        }
                                    }


                                }

                            }else if(node.nodeName === "TR"){
                                //将tr节点转化为对象
                                let trObj =  getObj(node,columns,false,true,false);

                                //单独点击每一行tr
                                if($(node).find('input')[0].checked){
                                    //表示是选中状态
                                    let value = $(node).find('td:nth-child(2)').text();
                                    if(trData.indexOf(value) == -1){
                                        trData.push(value);
                                    }
                                    //将当前tr节点转化为对象
                                    let trObj =  getObj(node,columns,false,true,false);
                                    //遍历trArray数组中的对象
                                    if(JSON.stringify(trArray).indexOf(JSON.stringify(trObj)) == -1){
                                        //数组中没有该对象，执行添加
                                        trArray.push(trObj);
                                    }
                                }else{
                                    //表示取消选中
                                    let value = $(node).find('td:nth-child(2)').text();
                                    if(trData.indexOf(value) != -1){
                                        //从数组中删除指定的value值
                                        trData.splice(trData.indexOf(value),1)
                                    }
                                    //将tr节点转化为对象
                                    let trObj =  getObj(node,columns,false,true,false);


                                    //遍历数组
                                    for(let i = 0; i < trArray.length; i++){
                                        //判断点击的对象是否已经保存在数组中
                                        if(trArray[i].id == trObj.id){
                                            //表示数组有对象，执行删除
                                            trArray.splice(i,1);
                                        }
                                    }
                                }
                            }
                        }
                    };
                    firstTable(options);
                    $('[name="thl-table"]').find('tbody > tr').each(function (index,trNode) {
                        //每一行的第二列中的值
                        let tdValue = $(this).find('td:nth-child(2)').text();

                        //
                        if(trData.indexOf(tdValue) != -1){
                            $(this).find('input')[0].checked = true;
                        }
                    });
                },'json')
            };
            //如果点击的是实现跳转的button标签，
            if(e.target.nodeName === 'BUTTON'){
                //定义要请求的地址
                let url = 'addGoodsServlet';
                //获取请求的form表单值
                let formValue = $('[name="thl-form"]').serialize();
                //获取请求的分页参数值
                let currentIndex = $('[name="jumpPage"]').val();
                //判断输入的页码是否符合规定，若不符合，则赋默认值
                //定义变量保存验证正整数的正则表达式规则
                let reg = /^[1-9]+$/;
                if(!reg.test(currentIndex)){
                    currentIndex = $('[name="currentIndex"]').text()
                }
                //最终的value
                let value = formValue + '&' + 'currentIndex=' + currentIndex;
                //给button添加ajax请求
                $.post(url, value,function (result) {

                    //将返回的json数据中的pageVO取出来
                    let goodsPageVO = result.data;
                    //定义分页的数据
                    let currentIndex = goodsPageVO.pageIndex;

                    let pageSize = goodsPageVO.pageSize;
                    let total = goodsPageVO.total;
                    let totalPage = Math.ceil(total / pageSize);

                    //判断是否是第一页或者是最后一页
                    let preDisabled = currentIndex <= 1 ? 'disabled' : '';
                    let nextDisabled = currentIndex >= totalPage ? 'disabled' : '';

                    //定义模板字符串，并将数据拼接到模板字符串中
                    let pageNode =  `
                    <li class="page-item \${preDisabled}"><a class="page-link" href="#" data-current-index="1">Previous</a></li>
                    <li class="page-item \${preDisabled}"><a class="page-link" href="#" data-current-index="\${currentIndex - 1}">&laquo;</a></li>
                    <li class="page-item disabled"><a class="page-link" href="#" name="currentIndex">\${currentIndex}</a></li>
                    <li class="page-item \${nextDisabled}"><a class="page-link" href="#" data-current-index="\${currentIndex + 1}">&raquo;</a></li>
                    <li class="page-item \${nextDisabled}"><a class="page-link" href="#" data-current-index="\${totalPage}">Next</a></li>
                    <li class="page-item" style="min-width: 84px; height: 35px"><div class="page-link" style="padding-top: 7px; padding-bottom: 7px"><input name="jumpPage" value="\${currentIndex}" style="width: 50px;height: 20px;"> <span>/\${totalPage}</span></div></li>
                    <li class="page-item"><button class="page-link" type="button">go</button></li>`;
                    //将模板字符串放到定义好的ul中
                    $('[name="ulPage2"]').html(pageNode)

                    //定义要显示的列名
                    let columns = [{field:"id",title:"商品编码"},
                        {field:"goodsName",title:"商品名称"},
                        {field:"categoryName", title:"商品分类"},
                        {field:"unit", title:"计量单位"}];
                    //定义表格的数据
                    let options = {
                        isPaging: false,
                        node: "[name='thl-table']",
                        pageVO: goodsPageVO,
                        columns: columns,
                        click: function (node, columns, uu) {

                            //uu是选中的tr节点
                            if(node == 'true'){

                                //循环遍历uu map对象
                                for(let i in uu){
                                    //找到tr节点
                                    let trNode = uu[i];
                                    //再找到tr中第二个td的值
                                    let value = $(trNode).find('td:nth-child(2)').text();
                                    if(trData.indexOf(value) == -1){
                                        trData.push(value)
                                    }
                                    //将tr节点转化为对象
                                    let trObj =  getObj(uu[i],columns,false,true,false);
                                    //遍历trArray数组中的对象
                                    if(JSON.stringify(trArray).indexOf(JSON.stringify(trObj)) == -1){
                                        //数组中没有该对象，执行添加
                                        trArray.push(trObj);
                                    }

                                }

                            }else if(node == 'false'){

                                //循环遍历uu map对象
                                for(let i in uu){
                                    //找到tr节点
                                    let trNode = uu[i];
                                    //再找到tr中第二个td的值
                                    let value = $(trNode).find('td:nth-child(2)').text();
                                    if(trData.indexOf(value) != -1){
                                        trData.splice(trData.indexOf(value),1)
                                    }

                                    //将tr节点转化为对象
                                    let trObj =  getObj(uu[i],columns,false,true,false);
                                    //遍历trArray数组中的对象,
                                    for(let j = 0; j < trArray.length; j++){
                                        //如果数组中存在相同的对象，则执行删除
                                        if(trArray[j].id == trObj.id){
                                            trArray.splice(j,1);
                                        }
                                    }


                                }

                            }else if(node.nodeName === "TR"){
                                //将tr节点转化为对象
                                let trObj =  getObj(node,columns,false,true,false);

                                //单独点击每一行tr
                                if($(node).find('input')[0].checked){
                                    //表示是选中状态
                                    let value = $(node).find('td:nth-child(2)').text();
                                    if(trData.indexOf(value) == -1){
                                        trData.push(value);
                                    }
                                    //将当前tr节点转化为对象
                                    let trObj =  getObj(node,columns,false,true,false);
                                    //遍历trArray数组中的对象
                                    if(JSON.stringify(trArray).indexOf(JSON.stringify(trObj)) == -1){
                                        //数组中没有该对象，执行添加
                                        trArray.push(trObj);
                                    }
                                }else{
                                    //表示取消选中
                                    let value = $(node).find('td:nth-child(2)').text();
                                    if(trData.indexOf(value) != -1){
                                        //从数组中删除指定的value值
                                        trData.splice(trData.indexOf(value),1)
                                    }
                                    //将tr节点转化为对象
                                    let trObj =  getObj(node,columns,false,true,false);


                                    //遍历数组
                                    for(let i = 0; i < trArray.length; i++){
                                        //判断点击的对象是否已经保存在数组中
                                        if(trArray[i].id == trObj.id){
                                            //表示数组有对象，执行删除
                                            trArray.splice(i,1);
                                        }
                                    }
                                }
                            }
                        }
                    };
                    firstTable(options);
                    //给分页条添加监听
                    $('[name="thl-table"]').find('tbody > tr').each(function (index,trNode) {
                        //每一行的第二列中的值
                        let tdValue = $(this).find('td:nth-child(2)').text();

                        //
                        if(trData.indexOf(tdValue) != -1){
                            $(this).find('input')[0].checked = true;
                        }
                    });
                },'json')
            }


        })

        //将定义的数组用data属性绑在div上，使下一个页面获取它
        $('.modal').data('trData',trData);
        $('.modal').data('trArray',trArray);

    })();




</script>
